<template>
    <div>
        <el-dialog width="65%" @close="dialogClose"
                   :visible.sync="centerDialogVisible"
                   center>
            <div slot="title" class="header-title">
                <div style="padding:15px 20px;">播放视频：{{this.playerTitle}}</div>
            </div>
            <OSSPlayer :player-id="'dialogPlay'" ref="ossPlayer" ></OSSPlayer>
        </el-dialog>
    </div>
</template>

<script>
    import OSSPlayer from "./OSSPlayer";
    export default {
        name: "DialogPlayer",
        components:{OSSPlayer},
        props:{

        },
        data(){
            return{
                //播放器实例
                dialogPlayer:{},
                playerTitle: {
                    default:'OSS播放Dialog Player'
                },
                centerDialogVisible: false
            }
        },
        mounted() {
            console.log("进来了：",this.message);
            //this.playURLS();
        },
        methods: {
            dialogClose(){
                this.$nextTick(()=>{
                    this.$refs.ossPlayer.pause();
                })
            },
            playerURL(url,title,coverPic) {
                //注意，必须先打开对话框才能获取对话框的ref
                this.centerDialogVisible = true;
                this.playerTitle=title;
                console.log("怎么了？");
                this.$nextTick(() => {
                    console.log("找到refs吗？", this.$refs.ossPlayer);
                    this.$refs.ossPlayer.playURL(url,coverPic);

                })

            },

            playerVOD(vod,title) {
                this.centerDialogVisible = true;
                this.playerTitle=title;
                console.log("进入视频vod：",vod);
                this.$nextTick(() => {
                    console.log("找到refs吗？", this.$refs.ossPlayer);
                    this.$refs.ossPlayer.playVOD(vod);

                })
            },
        }
    }
</script>

<style scoped>
    /deep/ .el-button.is-round{
        padding: 8px;
    }
    /deep/ .el-dialog__header{
        padding: 0;
    }
    /deep/ .el-dialog--center .el-dialog__body{
        background: #d2d3d04d;
    }
    /deep/ .el-dialog__headerbtn .el-dialog__close{
        color: white;
        font-size: 24px;
    }
    .player-btn{
        font-size: 24px;
    }
    .header-title{
        background: #2589e7;
        color: white;
        font-size: 20px;
    }
</style>